import { useState } from 'react'
import { getProductColorPageList } from '@/api/goods'
export interface IDataColorType {
  colorDetailName: string
  colorCode: string
  colorDetailId: string
  rgbValue: string
  picUrl?: string
}
const useSearchColor = (Key: 'colorCode' | 'colorDetailName' = 'colorCode') => {
  let ColorTimeout: ITimeoutType
  const [ColorOptions, setColorOptions] = useState<IOptionItem[]>([])
  const handleSearchColor = (newValue = '') => {
    if (ColorTimeout) {
      clearTimeout(ColorTimeout)
      ColorTimeout = null
    }
    const getOptions = async () => {
      const res = await getProductColorPageList<IDataColorType>({ colorGroupSearchName: newValue, enableStatus: 1 })
      if (res.code === 200) {
        const data =
          res?.data?.list?.map((item) => {
            return {
              label: item.colorDetailName,
              code: item.colorCode,
              value: item[Key],
              rgbValue: item.rgbValue,
              picUrl: item?.picUrl,
            }
          }) || []
        setColorOptions(data)
      }
    }
    ColorTimeout = setTimeout(getOptions, 500)
  }
  return { ColorOptions, setColorOptions, handleSearchColor }
}

export default useSearchColor
